<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌销售情况统计图</title>
<link rel="stylesheet" href="css/style66.css" media="screen"
	type="text/css" />
	<!-- End Skill Bar -->
	<script type="text/javascript" src='js/jquery-3.1.0.js'></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.skillbar').each(function() {
				$(this).find('.skillbar-bar').animate({
					width : $(this).attr('data-percent')
				}, 6000);
			});
		});
	</script>
</head>
<body>
	<h1>品牌销售比例统计图</h1>
	<div class="skillbar clearfix " data-percent="80%">
		<div class="skillbar-title" style="background: #d35400;">
			<span>联想</span>
		</div>
		<div class="skillbar-bar" style="background: #e67e22;"></div>
		<div class="skill-bar-percent">10%</div>
	</div>
	<!-- End Skill Bar -->
	<div class="skillbar clearfix " data-percent="10%">
		<div class="skillbar-title" style="background: #2980b9;">
			<span>惠普</span>
		</div>
		<div class="skillbar-bar" style="background: #3498db;"></div>
		<div class="skill-bar-percent">10%</div>
	</div>
	<!-- End Skill Bar -->
	<div class="skillbar clearfix " data-percent="10%">
		<div class="skillbar-title" style="background: #2c3e50;">
			<span>华硕</span>
		</div>
		<div class="skillbar-bar" style="background: #2c3e50;"></div>
		<div class="skill-bar-percent">${hsNumber2}</div>
	</div>
	<!-- End Skill Bar -->
	<div class="skillbar clearfix " data-percent="10%">
		<div class="skillbar-title" style="background: #46465e;">
			<span>宏碁</span>
		</div>
		<div class="skillbar-bar" style="background: #5a68a5;"></div>
		<div class="skill-bar-percent">${hqNumber2}</div>
	</div>
	<!-- End Skill Bar -->
	<div class="skillbar clearfix " data-percent="10%">
		<div class="skillbar-title" style="background: #333333;">
			<span>戴尔</span>
		</div>
		<div class="skillbar-bar" style="background: #525252;"></div>
		<div class="skill-bar-percent">${drNumber2}</div>
	</div>
	<!-- End Skill Bar -->
	<div class="skillbar clearfix " data-percent="10%">
		<div class="skillbar-title" style="background: #27ae60;">
			<span>苹果</span>
		</div>
		<div class="skillbar-bar" style="background: #2ecc71;"></div>
		<div class="skill-bar-percent">${pgNumber2}</div>
	</div>
	
</body>
</html>